<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom的增加和元素</title>
    <style>
        table,td{
            border: 1px solid #999;
        }
        td{
            width: 150px;
            height: 30px;
        }
    </style>
</head>
<body>
    <button type="button" onclick="add_line2()">添加一行</button>
    <button type="button" onclick="remove_line()">删除末尾</button>
    <button type="button" onclick="remove()">删除任意的</button>
    <div id="outer">
        <table>
            <tr>
                <td><input type="checkbox" id="cks" onclick="select_all(this)"></td>
                <td>1</td>
                <td class="td_third" ondblclick="edit(this)"></td>
                <td><a href="#" onclick="del(this)">del</a></td>
            </tr>
        </table>
    </div>
    <script>


        let count = 2;
        function add_line2(){
            //获取tbody对象
            let tbody = document.querySelector("#outer>table>tbody");
            //console.log(tbody.nodeName);//打印节点的名称

            //获取tbody中的原来的东西
            let old = tbody.innerHTML;

            let str = `<tr><td><input type='checkbox' name='ck'></td><td>${count++}</td><td class='td_third' ondblclick="edit(this)"></td><td><a href="#" onclick="del(this)">del</td></tr>`;
            
            old+=str;

            tbody.innerHTML = old;
            
        }

        function add_line(){
            //获取tbody对象
            let tbody = document.querySelector("#outer>table>tbody");
            //console.log(tbody.nodeName);//打印节点的名称

            //创建tr元素
            let tr = document.createElement("tr");

            let t = document.createElement("td");

            let input = document.createElement("input");
            //设置对象的属性
            input.type='checkbox';
            input.name='ck';

            //input绑定到第一个t
            t.appendChild(input);

            tr.appendChild(t);

            for(let i=0;i<2;i++){
                let td = document.createElement("td");
                //将td对象绑定到tr标签
                //append - 文本/dom元素
                //appendChild - dom元素
                tr.appendChild(td);
            }
            //tr绑定到tbody
            tbody.appendChild(tr);
        }

        function remove_line(){
              //获取tbody对象
              let tbody = document.querySelector("#outer>table>tbody");

              //获取tbody的最后一个元素
              let last = tbody.lastElementChild;
              //直接删除
              tbody.removeChild(last);
        }

        //全选和全不选
        function select_all(obj){
            //所有的ck
            let cks = document.getElementsByName("ck");

            if(obj.checked){
                for(let i=0;i<cks.length;i++){
                    cks[i].checked=true;
                }
            }else{
                for(let i=0;i<cks.length;i++){
                    cks[i].checked=false;
                }
            }
        }

        //删除指定行
        function del(obj){
            //removeChild

            // 拿到a标签所在的tr标签
            let tbody = document.querySelector("#outer>table>tbody");
            tbody.removeChild(obj.parentElement.parentElement);
        }

        function remove(){
            let cks = document.getElementsByName("ck");
            let tbody = document.querySelector("#outer>table>tbody");
            

            let count = 0;

            let arr = [];

            for(let i=0;i<cks.length;i++){
                if(cks[i].checked){
                    count++;
                    arr.push(cks[i]);
                }
            }
            if(count==0){
                alert("sorry,请先勾选商品!");
                return;
            }

            //确认框
            let flag = confirm("确认删除吗?");
            if(flag){
                for(let i=0;i<arr.length;i++){
                    tbody.removeChild(arr[i].parentElement.parentElement);
                }
            }
        }

        //编辑td
        function edit(obj){
            //1. 获取obj内部的东西
            let content = obj.innerHTML.trim();

            //2. 填入文本框
            let input = document.createElement("input");
            input.type="text";
           
            input.value = content;
           
            
            //文本框失去焦点的事件
            input.onblur=function(){
                obj.innerHTML = input.value;
            }

            input.onkeydown=function(event){
                let e = event || window.event;
                if(e.keyCode==13){//enter
                    obj.innerHTML = input.value;
                }
            }

            obj.innerHTML="";
            obj.appendChild(input);
            input.select();
        }
    </script>
</body>
</html>